<template>
  <div class="formlist">
    <div class="myeltable">
      <el-table ref="tableData" :data="myTableData" height="736" style="width: 100%;"
        header-row-class-name="my-header-row" header-cell-class-name="my-header-cell" row-class-name="my-row"
        cell-class-name="my-cell" @sort-change="handleSort">
        <el-table-column label="全市各区车辆统计分析" align="center">
          <el-table-column width="90" prop="AreaName" label="区域名称">
          </el-table-column>
          <el-table-column width="90" prop="Num" label="车辆数" sortable="custom">
          </el-table-column>
          <!-- <el-table-column
            width="130"
            prop="density"
            label="货车密度（辆/平方公里）"
            sortable="custom"
          >
          </el-table-column> -->
          <el-table-column width="450" label="不同排放阶段车辆占比">
            <el-table-column prop="CountryThree" label="国三" sortable="custom">
            </el-table-column>
            <el-table-column prop="CountryFour" label="国四" sortable="custom">
            </el-table-column>
            <el-table-column prop="CountryFive" label="国五" sortable="custom">
            </el-table-column>
            <el-table-column prop="CountrySix" label="国六" sortable="custom">
            </el-table-column>
            <el-table-column prop="CountryN" label="新能源" sortable="custom">

            </el-table-column>
            <el-table-column prop="CountryAll" label="国五以上及新能源" sortable="custom"></el-table-column>
            <el-table-column prop="CountryAllSix" label="国六及新能源" sortable="custom"></el-table-column>
          
          </el-table-column>
          <el-table-column
            width="240"
            label="重点污染物排放强度（Kg/Km2）"
          >
            <el-table-column
              prop="pm25"
              label="PM25"
              sortable="custom"
            >
            </el-table-column>
            <el-table-column
              prop="nox"
              label="Nox"
              sortable="custom"
            >
            </el-table-column>
          </el-table-column> 
          <el-table-column
            width="240"
            label="重点污染物排放总量（Kg）"
          >
            <el-table-column
              prop="PM25"
              label="PM25"
              sortable="custom"
            >
            </el-table-column>
            <el-table-column
              prop="Nox"
              label="Nox"
              sortable="custom"
            >
            </el-table-column>
          </el-table-column> 
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'regionTable',
  data() {
    return {
      value: '',
      myTableData: [],
    }
  },
  props: {
    tableData: {
      type: Array,
      default: []
    },
  },
  mounted() {
  },
  methods: {
    handleSort(column) {
      let that = this
      let tempTableData = []
      // 获取字段名称和排序类型
      let fieldName = column.prop
      let sortingType = column.order
      // 过滤出符合排序的数据形成新数组，再对该数组进行常规排序
      tempTableData = Object.assign([], that.tableData.filter(el => (el[fieldName] !== ' ' && el[fieldName] !== undefined)))
      if (sortingType !== null) {
        if (sortingType === 'descending') {
          // 按照降序排序
          // 冒泡排序新数组
          tempTableData = tempTableData.sort((a, b) => parseFloat(b[fieldName]) - parseFloat(a[fieldName]))
        } else { // 按照升序排序
          // 冒泡排序新数组
          tempTableData = tempTableData.sort((a, b) => parseFloat(a[fieldName]) - parseFloat(b[fieldName]))
        }
        that.myTableData = tempTableData
      } else {
        // 如果是取消排序，则将数据还原成接口返回的数据
        that.myTableData = that.tableData
      }
    }
  },
  watch: {
    tableData(n, o) {
      this.myTableData = n
      this.$refs.tableData.clearSort()
    },
    myTableData: {
      immediate: true,
      deep: true,
      handler(n, o) {

      }
    }
  }
}
</script>
<style scoped lang="scss">
.formlist {
  width: 100%;

  .myeltable {
    width: 100%;
    height: 736px;

  }
}


::v-deep {
  .el-table {
    background: transparent !important;
    color: #e8edf3;
    border: none;

    &::before {
      display: none;
    }
  }

  .el-table--group::after,
  .el-table--border::after {
    display: none;
  }

  .el-table__header-wrapper {
    margin-bottom: 11px;
  }

  //表头行样式
  .my-header-row {
    background-color: transparent;
    background-image: linear-gradient(0deg, rgba(55, 55, 74, 0.4) 0%, rgba(55, 55, 74, 0.4) 100%);

    &:nth-child(1) {
      border: dotted 1px #f3e8e866;
      display: flex;
      width: 1768px;
      margin-bottom: 10px;
      text-align: center;

      .my-header-cell {
        width: 100%;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    &:nth-child(2) {
      .my-header-cell {
        font-size: 16px;
        border-top: dotted 1px #f3e8e866;
        border-right: dotted 1px #f3e8e866;

        div {
          text-align: center;
        }

        &:nth-child(1) {
          border-bottom: dotted 1px #f3e8e866;
          font-size: 14px;
          border: dotted 1px #f3e8e866;
        }

        &:nth-child(2) {
          border-bottom: dotted 1px #f3e8e866;
          font-size: 14px;
        }

        &:nth-child(3) {
          border-bottom: dotted 1px #f3e8e866;
          font-size: 14px;
        }
      }
    }

    &:nth-child(3) {
      .my-header-cell {
        font-size: 14px;
        border-top: dotted 1px #f3e8e866;
        border-bottom: dotted 1px #f3e8e866;
        border-right: dotted 1px #f3e8e866;
      }
    }

    //border: dotted 1px #f3e8e8;
    //表头单元格样式
    .my-header-cell {
      background: transparent !important;
      height: 40px !important;
      font-size: 14px;
      color: #e8edf3;
      border: none;
    }
  }

  //表单行样式
  .my-row {
    background-color: transparent;

    &:hover {
      color: #07f5d1;

      .my-cell {
        background-color: #07f5d11a !important;
      }
    }
  }

  //表单单元格样式
  .my-cell {
    border: 0px !important;
    font-size: 14px;
    padding: 11px 0px;
    height: 38px;

    .cell {
      line-height: 16px;
    }
  }

  /*.el-table tr {
    background: transparent ;
  }
  .el-table thead.is-group th.el-table__cell{
    color:#fff;
    background: transparent !important;
  }

  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent;
  }
  .el-table tbody tr:hover>td {
    color:#00fff4;
    background-color:#ffffff26 !important;
  }*/
  /*.el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: transparent ;
  }*/
}
</style>
